<template>
  <div class="gl_contentBox gl_heightFull noPadding">
    <div class="top_title">{{ examId ? '考试详情' : '级段位申报' }}</div>
    <div class="form_content">
      <el-form
        ref="declareVO"
        v-loading="loading"
        :model="declareVO"
        label-width="110px"
        size="small"
        :rules="declareVO_Rules"
      >
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="申报名称" prop="name">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.name" maxlength="50" placeholder="请输入申报名称" />
              <div v-else>{{ declareVO.name }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="申报机构" prop="organizationUnitIds">
          <div v-if="handlerType === 'inquiry'">
            <el-tag v-for="(item, index) in organList" :key="index" class="gl_mr_15">{{ item.displayName }}</el-tag>
          </div>
          <div v-else>
            <el-tag class="gl_mr_10">{{ info.currentOrganizationUnit.displayName }}</el-tag>
            <el-tag v-for="(item, index) in organList" :key="index" closable class="gl_mr_15" @close="deleteOrgan(index)">{{ item.displayName }}</el-tag>
            <el-button size="mini" icon="el-icon-circle-plus-outline" @click="addOrgan()" />
          </div>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="考点编号">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.placeNo" maxlength="40" placeholder="请输入考点编号" />
              <div v-else>{{ declareVO.placeNo }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="考试日期" prop="startTime">
              <el-input v-show="false" v-model.trim="declareVO.startTime" />
              <el-date-picker
                v-if="handlerType !== 'inquiry'"
                v-model="examTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="handleEntryTime"
              />
              <div v-else>{{ declareVO.startTime | FormatDate('yyyy-MM-dd') }} 至 {{ declareVO.startTime | FormatDate('yyyy-MM-dd') }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="考试地点" prop="provinceCode">
              <el-input v-show="false" v-model.trim="declareVO.provinceCode" />
              <el-cascader v-if="handlerType !== 'inquiry'" v-model="areaList" :options="cache.district" :props="{ value: 'code', label: 'name' }" style="width: 100%;" @change="handleAreaChange" />
              <div v-else>{{ addressDataForCheck(declareVO.provinceCode, declareVO.cityCode, declareVO.countyCode) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="详细地址" prop="address">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.address" placeholder="请输入详细地址" maxlength="30" />
              <el-popover v-else placement="bottom-end" width="300" trigger="hover" :content="declareVO.address">
                <div slot="reference" class="table_name">{{ declareVO.address ? declareVO.address.length > 23 ? declareVO.address.substr(0, 23) + '...' : declareVO.address : '--' }}</div>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="联系人" prop="contact">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.contact" maxlength="20" placeholder="请输入联系人" />
              <div v-else>{{ declareVO.contact }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="联系人电话" prop="phoneNumber">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.phoneNumber" placeholder="请输入联系人电话" />
              <div v-else>{{ declareVO.phoneNumber }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="申报级段位" prop="duanIds">
          <el-checkbox-group v-model="declareVO.duanIds" :disabled="handlerType === 'inquiry'">
            <el-checkbox v-for="item in duanList" :key="item.id" :label="item.id">{{ item.fullName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-tooltip v-if="handlerType !== 'inquiry'" effect="dark" placement="top">
              <div slot="content">文件类型：pdf, doc, docx,大小不得超过5M</div>
              <el-form-item label="资质">
                <el-input v-show="false" v-model.trim="declareVO.qualificationFileUrl" />
                <upload-file
                  ref="qualificationUpload"
                  :action="uploadAction"
                  file-type="file"
                  format-file=".pdf,.doc,.docx"
                  :default-file-url="getStaticFileUrl(declareVO.qualificationFileUrl)"
                  default-file-name="资质"
                  :max-size="5120"
                  @uploadSuccess="qualificationUploadSuccess"
                />
              </el-form-item>
            </el-tooltip>
            <el-form-item v-if="handlerType === 'inquiry'" label="资质">
              <!-- <el-button size="mini" type="text" @click="JumpToFile(declareVO.qualificationFileUrl)">资质</el-button>-->
              <el-link v-if="declareVO.qualificationFileUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareVO.qualificationFileUrl)">资质</el-link>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-tooltip effect="dark" placement="top">
              <div slot="content">文件类型：pdf, doc, docx,大小不得超过5M</div>
              <el-form-item v-if="handlerType !== 'inquiry'" label="附件">
                <el-input v-show="false" v-model.trim="declareVO.attachmentUrl" />
                <upload-file
                  ref="attachmentUpload"
                  :action="uploadAction"
                  file-type="file"
                  format-file=".pdf,.doc,.docx"
                  :default-file-url="getStaticFileUrl(declareVO.attachmentUrl)"
                  default-file-name="附件"
                  :max-size="5120"
                  @uploadSuccess="attachmentUploadSuccess"
                />
              </el-form-item>
            </el-tooltip>
            <el-form-item v-if="handlerType === 'inquiry'" label="附件">
              <el-link v-if="declareVO.attachmentUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareVO.attachmentUrl)">附件</el-link>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 审批后增加字段  考试内容 批复文件 驳回原因 考官 -->
        <template v-if="handlerType === 'inquiry' && declareDTO.requestStatusCode === 'Approved'">
          <el-form-item label="考官">
            <el-tag v-for="(item, index) in declareDTO.officials" :key="index" class="gl_mr_15">{{ '姓名：' + item.name + '  考官编号：' + item.no }}</el-tag>
          </el-form-item>
          <el-row v-if="handlerType === 'inquiry'" :gutter="20">
            <el-col :span="11" class="form_item">
              <el-form-item label="考试内容">
                <el-link v-if="declareDTO.examContentUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareDTO.examContentUrl)">考试内容</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2" class="form_item">
              <el-form-item label="批复文件">
                <el-link v-if="declareDTO.replyFileUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareDTO.replyFileUrl)">批复文件</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template>
          <el-form-item
            v-if="handlerType === 'inquiry' && declareDTO.requestStatusCode === 'Approved' || declareDTO.requestStatusCode === 'NotApproved'"
            :label="declareDTO.requestStatusCode === 'NotApproved' ? '驳回原因' : '备注信息'"
          >
            <div>{{ declareDTO.approveComment }}</div>
          </el-form-item>
        </template>
      </el-form>
      <!-- 查看状态无操作按钮 申报端申报有操作按钮 -->
      <el-row v-if="handlerType !== 'inquiry'" class="func_btn">
        <el-col :span="24" align="center">
          <el-button type="default" size="mini" @click="goBack()">取消</el-button>
          <el-button type="default" size="mini" :loading="preserveLoading" @click="sumitDeclare(true)">保存</el-button>
          <el-button type="primary" size="mini" :loading="submitLoading" @click="sumitDeclare(false)">保存并提交</el-button>
        </el-col>
      </el-row>
      <add-organ ref="addOrgan" />
    </div>
  </div>
</template>
<script>
import addOrgan from './components/addOrgan.vue';
import validator from '@/lib/validate/index.js';
import uploadFile from './components/UploadFile.vue';
// import uploadFile from '@/components/UploadFile';
import { CopyData } from '@/lib';
import { mapState } from 'vuex';
import {
  Api_GET_ClubDuanQO, // 查询级段位列表
  Api_GET_ClubDuanExamRequestIdQO, // 查询指定级段位考试申请
  CreateDuanExamRequestInput, // 新建级段位考试申请
  Api_GET_ClubDuanExamIdQO, // 获取考试详细信息
  Api_GET_ClubBranchIdBranchDuanExamQO // 获取分道馆级段位申报详情
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubDuan, // 查询级段位列表
  api_GET_ClubDuanExamRequestId, // 查询指定级段位考试申请
  api_POST_ClubDuanExamRequest, // 新建级段位考试申请
  api_PUT_ClubDuanExamRequestId, // 修改级段位考试申请
  api_GET_ClubDuanExamId, // 获取考试详细信息
  api_GET_ClubBranchIdBranchDuanExam // 获取分道馆级段位申报详情
} from '@/extend/api/hallswaggerApi/app';
export default {
  components: {
    uploadFile, addOrgan
  },
  props: {
    handlerType: { // 当前操作类型  新增(add) 编辑(edit)  查询(inquiry)
      type: String,
      required: false,
      default: 'add'
    }
  },
  data() {
    return {
      uploadAction: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/document`,
      declareVO: new CreateDuanExamRequestInput(),
      loading: false,
      preserveLoading: false,
      submitLoading: false,
      declareDTO: {},
      areaList: [],
      examTime: [],
      declareId: '',
      examId: '',
      campusExamId: '',
      branchId: '',
      declareVO_Rules: {
        name: [
          validator.required('申报名称不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkNameLen(value, '申报名称数限制50字以内'));
            },
            trigger: 'blur'
          }
        ],
        organizationUnitIds: [
          {
            type: 'array',
            required: true,
            validator(rule, value, callback) {
              callback(validator.checkArray(value, '申报机构不能为空'));
            },
            trigger: 'blur'
          }
        ],
        startTime: [validator.required('考试日期不能为空', 'blur')],
        endTime: [validator.required('考试日期不能为空', 'blur')],
        placeNo: [{
          validator(rule, value, callback) {
            callback(validator.checkDisciplineCode(value, '考点编号格式错误'));
          },
          trigger: 'blur'
        }],
        provinceCode: [validator.required('考试地点不能为空', 'blur')],
        cityCode: [validator.required('考试地点不能为空', 'blur')],
        countyCode: [validator.required('考试地点不能为空', 'blur')],
        address: [validator.required('详细地址不能为空', 'blur')],
        contact: [validator.required('联系人不能为空')],
        phoneNumber: [
          validator.required('联系人电话不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        duanIds: [
          {
            type: 'array',
            required: true,
            validator(rule, value, callback) {
              callback(validator.checkArray(value, '申报级段位不能为空'));
            },
            trigger: 'blur'
          }
        ]
      },
      organList: [],
      duanList: []
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache,
      info: state => state.user.info,
      user: state => state.user.currentOU
    })
  },
  created() {
    this.declareId = this.$route.query.declareId || this.$route.params.declareId || '';
    this.examId = this.$route.query.examId || this.$route.params.examId || '';
    this.campusExamId = this.$route.query.campusExamId || this.$route.params.campusExamId || '';
    this.branchId = this.$route.query.branchid || this.$route.params.branchid || '';
    this.init();
  },
  methods: {
    init() {
      this.areaList = [];
      this.examTime = [];
      // 获取级段位列表
      this.getDuanList()
        .then(
          res => {
            this.duanList = res.items;
            this.chooseInfo();
          }
        )
        .catch(
          error => {
            this.loading = false;
            this.chooseInfo();
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          }
        );
    },
    chooseInfo() {
      if (this.handlerType === 'edit' || this.handlerType === 'inquiry') {
        if (this.declareId) { // 获取申报详情(级段位-级段位申报)
          this.getDeclareInfo();
        }
        if (this.examId) { // 获取考试详情（级段位-考试）
          this.getExamInfo();
        }
        if (this.campusExamId) { // 获取分道馆级段位考试详情
          this.getCampusExamInfo();
        }
      } else {
        this.loading = false;
      }
    },
    // 获取级段位列表
    getDuanList() {
      const qo = new Api_GET_ClubDuanQO();
      qo.MaxResultCount = 999;
      qo.IsEnabled = true;
      qo.IncludeBeltDuanType = true;
      qo.IncludeBeltLevelType = true;
      qo.IncludeLevelDuanType = true;
      qo.Sorting = 'creationTime DESC';
      this.loading = true;
      return new Promise((resolve, reject) => {
        api_GET_ClubDuan(qo)
          .then(
            res => {
              resolve(res);
            }
          )
          .catch(
            error => {
              reject(error);
            }
          );
      });
    },
    // 获取申报详情(级段位-级段位申报)
    getDeclareInfo() {
      const that = this;
      this.loading = true;
      const qo = new Api_GET_ClubDuanExamRequestIdQO();
      qo.IncludeRequestStatus = true;
      qo.IncludeRequestOrganizationUnits = true;
      qo.IncludeRequestDuans = true;
      qo.IncludeOfficials = true;
      qo.IncludeExam = true;
      api_GET_ClubDuanExamRequestId(this.declareId, qo).then(res => {
        this.declareDTO = res || {};
        CopyData(this.declareDTO, this.declareVO);
        this.areaList = [this.declareVO.provinceCode, this.declareVO.cityCode, this.declareVO.countyCode];
        this.examTime = [this.declareVO.startTime, this.declareVO.endTime];
        this.declareVO.duanIds = this.declareDTO.requestDuans.map(item => item.duanId);
        if (this.handlerType === 'inquiry') {
          this.duanList = this.duanList.filter(item => {
            return that.declareVO.duanIds.indexOf(item.id) !== -1;
          });
        }
        const arr1 = [];
        const arr2 = [];
        this.declareDTO.requestOrganizationUnits.map(item => {
          return item.isHost ? arr1.push({ id: item.organizationUnitId, displayName: item.organizationUnitName }) : arr2.push({ id: item.organizationUnitId, displayName: item.organizationUnitName });
        });
        this.organList = this.handlerType === 'edit' ? arr2 : arr1.concat(arr2);
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取考试详情（级段位-考试） ----级段位-考试-可参加考试
    getExamInfo() {
      const that = this;
      this.loading = true;
      const qo = new Api_GET_ClubDuanExamIdQO();
      qo.IncludeProvince = true;
      qo.IncludeCity = true;
      qo.IncludeCounty = true;
      qo.IncludeDuans = true;
      qo.IncludeRequest = true;
      qo.IncludeRequestOrganizationUnits = true;
      qo.IncludeRequestDuans = true;
      qo.IncludeOfficials = true;
      qo.IncludeParticipatingUnits = true;
      api_GET_ClubDuanExamId(this.examId, qo).then(res => {
        this.declareDTO = res.request || {};
        CopyData(this.declareDTO, this.declareVO);
        this.areaList = [this.declareVO.provinceCode, this.declareVO.cityCode, this.declareVO.countyCode];
        this.examTime = [this.declareVO.startTime, this.declareVO.endTime];
        this.declareVO.duanIds = this.declareDTO.requestDuans.map(item => item.duanId);
        console.log(this.duanList);
        if (this.handlerType === 'inquiry') {
          this.duanList = this.duanList.filter(item => {
            return that.declareVO.duanIds.indexOf(item.id) !== -1;
          });
        }
        console.log(this.declareVO.duanIds, this.duanList);
        const arr1 = [];
        const arr2 = [];
        this.declareDTO.requestOrganizationUnits.map(item => {
          return item.isHost ? arr1.push({ id: item.organizationUnitId, displayName: item.organizationUnitName }) : arr2.push({ id: item.organizationUnitId, displayName: item.organizationUnitName });
        });
        this.organList = arr1.concat(arr2);
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取分道馆级段位考试详情
    getCampusExamInfo() {
      const that = this;
      this.loading = true;
      const qo = new Api_GET_ClubBranchIdBranchDuanExamQO();
      qo.IncludeProvince = true;
      qo.IncludeCity = true;
      qo.IncludeCounty = true;
      qo.IncludeDuans = true;
      qo.IncludeRequestOrganizationUnits = true;
      qo.IncludeRequest = true;
      qo.IncludeRequestDuans = true;
      qo.IncludeOfficials = true;
      qo.IncludeParticipatingUnits = true;
      api_GET_ClubBranchIdBranchDuanExam(this.campusExamId, qo).then(res => {
        this.declareDTO = res.request || {};
        CopyData(this.declareDTO, this.declareVO);
        this.areaList = [this.declareVO.provinceCode, this.declareVO.cityCode, this.declareVO.countyCode];
        this.examTime = [this.declareVO.startTime, this.declareVO.endTime];
        this.declareVO.duanIds = this.declareDTO.requestDuans.map(item => item.duanId);
        if (this.handlerType === 'inquiry') {
          this.duanList = this.duanList.filter(item => {
            return that.declareVO.duanIds.indexOf(item.id) !== -1;
          });
        }
        const arr1 = [];
        const arr2 = [];
        this.declareDTO.requestOrganizationUnits.map(item => {
          return item.isHost ? arr1.push({ id: item.organizationUnitId, displayName: item.organizationUnitName }) : arr2.push({ id: item.organizationUnitId, displayName: item.organizationUnitName });
        });
        this.organList = arr1.concat(arr2);
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 保存或保存并提交
    sumitDeclare(type) {
      this.declareVO.isDraft = type;
      const organList = this.organList.map(item => item.id);
      this.declareVO.organizationUnitIds = [this.user].concat(organList);
      this.$refs.declareVO.validate(valid => {
        if (valid) {
          this.preserveLoading = type;
          this.submitLoading = !type;
          this.handlerType === 'add' ? this.add(type) : this.edit(type);
        }
      });
    },
    // 新增
    add(type) {
      api_POST_ClubDuanExamRequest(this.declareVO).then(res => {
        this.submitLoading = false;
        this.preserveLoading = false;
        this.$message({ type: 'success', message: `${type ? '保存' : '提交'}成功！` });
        this.$router.push({
          name: 'DeclareManagement'
        });
      }, error => {
        this.submitLoading = false;
        this.preserveLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 编辑
    edit(type) {
      api_PUT_ClubDuanExamRequestId(this.declareId, this.declareVO).then(res => {
        this.submitLoading = false;
        this.preserveLoading = false;
        this.$message({ type: 'success', message: `${type ? '保存' : '提交'}成功！` });
        this.$router.push({
          name: 'DeclareManagement'
        });
      }, error => {
        this.submitLoading = false;
        this.preserveLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 新增道馆弹窗
    addOrgan() {
      this.$refs.addOrgan.dialogVisible = true;
      this.$refs.addOrgan.getPageList();
    },
    // 资质上传
    qualificationUploadSuccess(fileUrl) {
      this.$set(this.declareVO, 'qualificationFileUrl', fileUrl.tempUrl);
    },
    // 附件上传
    attachmentUploadSuccess(fileUrl) {
      this.$set(this.declareVO, 'attachmentUrl', fileUrl.tempUrl);
    },
    // 处理申报道馆机构数据
    handlerOrganList(arr) {
      this.organList = this.organList.concat(arr);
      this.organList = this.remove(this.organList, 'id');
      this.$refs.addOrgan.cancelDialog();
    },
    // 删除申报机构
    deleteOrgan(index) {
      this.organList.splice(index, 1);
    },
    // 取消按钮
    goBack() {
      this.$router.push({
        name: 'DeclareManagement'
      });
    },
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData}-${_cityData}-${_countyData}`;
    },
    // 处理地区显示
    handleAreaChange() {
      this.declareVO.provinceCode = this.areaList && this.areaList[0];
      this.declareVO.cityCode = this.areaList && this.areaList[1];
      this.declareVO.countyCode = this.areaList && this.areaList[2];
    },
    // 处理考试日期
    handleEntryTime() {
      this.declareVO.startTime = this.examTime && this.examTime[0];
      this.declareVO.endTime = this.examTime && this.examTime[1];
    },
    JumpToFile(url) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = this.getStaticFileUrl(url);
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 去重
    remove(arr, key) {
      if (arr.length <= 1) return arr;
      const obj = {};
      arr = arr.reduce(function(prev, cur) {
        obj[cur[key]] ? '' : obj[cur[key]] = true && prev.push(cur);
        return prev;
      }, []);
      return arr;
    }
  }
};
</script>
<style scoped>
.noPadding {
  padding: 0px;
}
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 16px;
  font-weight: bold;
  padding-left: 25px;
}
.form_content {
  min-width: 1160px;
  max-width: 1320px;
  min-height: 480px;
  padding: 75px 70px 15px;
  margin: 0 auto;
}
.func_btn {
  margin-top: 80px;
}
.upload_game_img {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload_game_img.border {
  border: 1px dotted #DCDFE6;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-height: 100%;
  border-radius: 4px;
  vertical-align: top;
}
.upload_game_img .img_text {
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  text-align: center;
  position: absolute;
  top: 60px;
  line-height: 20px;
  width: 98px;
}
.img_text_under{
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  text-align: center;
}
.el-checkbox {
  margin-right: 15px;
}
</style>
